<template>
  <div class="page">
    <!-- <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入主播昵称搜索"
            v-model="alone.searchForm.data.searchStr"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.uid"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
            disabled
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div> -->

    <div class="c-main p20">
      <div class="clearfix">
        <div class="fl" style="line-height: 36px;">
          运营：{{ pageAjax.data.nickName || "无" }}
        </div>
        <div class="fl ml20" style="line-height: 36px;">
          个人运营总成本：{{ pageAjax.data.totalCost || 0 }}
        </div>
        <div class="fl ml20" style="line-height: 36px;">单位：元</div>
        <div class="fl ml20" style="line-height: 36px;">
          刷新时间：{{ refreshTimeAjax.data.time || 0 }}
        </div>
        <el-button type="text" class="fl ml20" @click="rRefreshData"
          >刷新</el-button
        >
      </div>
      <div class="c-section">
        <div class="c-body">
          <div class="mt20">
            <b>成本详情</b> <span class="ml20">单位：元</span>
          </div>
          <el-divider></el-divider>
          <el-row class="mt20">
            <el-col :span="16">
              <span class="">已核销:{{ pageAjax.data.checkCoin || 0 }}</span>
              <span class="ml20"
                >未核销:{{
                  pageAjax.data.brushCoin1 +
                    pageAjax.data.brushCoin2 -
                    pageAjax.data.checkCoin || 0
                }}</span
              >
              <span class="ml20"
                >刷币损失:{{ pageAjax.data.brushPublicLose || 0 }}</span
              >
            </el-col>
            <el-col :span="8">
              <!-- <router-link
                :to="{
                  name: 'finance_departmentRewardTotalDetail',
                  query: { id: alone.searchForm.data.uid }
                }"
                >刷币申请总额详情</router-link
              > -->
              <router-link
                class="ml20"
                v-hasAuth:agent_financePersonalrewardDetailIndex
                :to="{
                  name: 'agent_financePersonalrewardDetailIndex',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >核销详情</router-link
              >
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="20">
              <span
                >主播保底/底薪总额:{{ pageAjax.data.basicSalary || 0 }}</span
              >
            </el-col>
            <el-col :span="4">
              <router-link
                v-hasAuth:agent_financePersonalBasePayDetail
                :to="{
                  name: 'agent_financePersonalBasePayDetail',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >详情</router-link
              >
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="20">
              <span
                >签约金/经纪权转让费用总额:{{
                  pageAjax.data.transferAmount + pageAjax.data.signAmount || 0
                }}</span
              >
            </el-col>
            <el-col :span="4">
              <router-link
                v-hasAuth:agent_financePersonalRetainerDetail
                :to="{
                  name: 'agent_financePersonalRetainerDetail',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >详情</router-link
              >
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="20">
              <span
                >设备扶持费用总额:{{ pageAjax.data.deviceAmount || 0 }}</span
              >
            </el-col>
            <el-col :span="4">
              <router-link
                v-hasAuth:agent_financePersonalFacilityCostDetail
                :to="{
                  name: 'agent_financePersonalFacilityCostDetail',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >详情</router-link
              >
            </el-col>
          </el-row>
          <el-row class="mt20">
            <el-col :span="20">
              <span>住房扶持费用总额:{{ pageAjax.data.houseAmount || 0 }}</span>
            </el-col>
            <el-col :span="4">
              <router-link
                v-hasAuth:agent_financePersonalHouseCostDetail
                :to="{
                  name: 'agent_financePersonalHouseCostDetail',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >详情</router-link
              >
            </el-col>
          </el-row>
          <!-- <el-row class="mt20">
            <el-col :span="20">
              <span>经纪权转让费用总额:{{pageAjax.data.basicCoinTotal}}</span>
            </el-col>
            <el-col :span="4">
              <router-link
                :to="{ name: 'agent_financepersonalClosingCostDetail' }"
                >详情</router-link
              >
            </el-col>
          </el-row> -->
          <el-row class="mt20">
            <el-col :span="20">
              <span>星探合作费用总额:{{ pageAjax.data.scoutAmount || 0 }}</span>
            </el-col>
            <el-col :span="4">
              <router-link
                v-hasAuth:agent_financePersonalSeestarCostDetail
                :to="{
                  name: 'agent_financePersonalSeestarCostDetail',
                  query: { uid: alone.searchForm.data.uid }
                }"
                >详情</router-link
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getFinalCostPersonal,
  refreshData,
  getRefreshTime
} from "@/api/finance.js";

import _ from "lodash";
import { getOffspringnTree } from "@/assets/js/util.js";

export default {
  name: "agent_signedList",
  data: () => ({
    pageAjax: {
      data: {}
    },
    orgSupAjax: {
      data: []
    },
    refreshTimeAjax: {
      data: {
        time: ""
      }
    },
    alone: {
      searchForm: {
        data: {
          uid: ""
        }
      }
    },
    translate: {},
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          multiple: false,
          emitPath: false,
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
    _that.getOrgData();
    _that.getRefreshTimeData();
    _that.alone.searchForm.data.uid = _that.$store.state.userData.userId;
  },
  mounted() {},
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.pageAjax.lock = false;
      _that.getPageData();
    },
    // 同步易快报数据到数据库
    rRefreshData() {
      let loading = this.$loading();
      let _that = this;
      refreshData()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "获取失败");
            _that.getRefreshTimeData();
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      _that.pageAjax.loading = true;
      data.uids = _that.$route.query.id;
      getFinalCostPersonal({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let reapResult = respData.data || [];
            _that.pageAjax.data = reapResult[0] || {};
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getRefreshTimeData() {
      let _that = this;
      getRefreshTime().then(resp => {
        let respData = resp.data || {};

        if (respData.code === _that.STATUS.success[0]) {
          _that.refreshTimeAjax.data.time = respData.data;
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-agentWish {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
    .c-card {
      .c-item {
        padding-bottom: 20px;
        border-top: 1px solid #f5f7fa;
      }
      .c-UserInfo {
        position: relative;
        overflow: hidden;
        line-height: 25px;
      }
      .c-avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .c-nameInfo {
        float: left;
        margin-left: 20px;
      }
      .c-copyBtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 20px;
      }
      .c-bid {
        overflow: hidden;
        line-height: 30px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
